<template>
    <div id="userEnroll">
        <BackHeader :header="Header"></BackHeader>
        <div class="travel">
            <img src="../../assets/img/7.png">
        </div>
        <div class="enroll">
            <div>
                <p>
                    <div class="iconfont icon-shouji"><input type="text" id="num" placeholder="请输入账号" v-model="username"></div>
                    <p>
                        <div class="iconfont icon-suo"><input type="password" id="password" placeholder="请输入密码" v-model="password"></div>

            </div>
            <div class="denglu">
                <mt-button class="anniu" size="large" type="primary" @click="login">登陆</mt-button>
                <mt-button class="anniu1" size="large" type="primary" @click="zhuce">注册</mt-button>
                <mt-button class="anniu2" size="large" type="primary" @click="forget">忘记密码</mt-button>

            </div>
            <div class="xieyi">登陆即表示同意<a class="fuwu">《服务协议》</a>和<a class="yinsi">《隐私协议》</a>
            </div>
        </div>


    </div>
</template>
<script>
    import BackHeader from '../../components/Header/BackHeader.vue'
    import { Button } from 'mint-ui';
    import { MessageBox } from "mint-ui";
    import MemberCenterProvider from "@/providers/MemberCenterProvider";

    export default {
        name: 'userEnroll',
        data() {
            return {
                Header: '个人登陆',
                username: "",
                password: "",
                cao: ""
            }
        },
        components: {
            BackHeader
        },
        methods: {
            userCenter() {
                this.$router.push('/userCenter2');
            },
            login() {
                
                if (!this.username || !this.password) {
                    MessageBox("提示", "用戶名或密碼不能為空！")
                } else {
                    let data = {
                        user: {
                            userName: this.username,
                            password: this.password
                        }
                    };
                    MemberCenterProvider.login(data).then(res => {
                        this.cao = res.data;
                        console.log(this.cao);
                        if (this.cao == '登录成功') {
                            MessageBox.alert("登陆成功！").then(action => {
                                this.$router.push("/userCenter");
                             
                                  
                                
                            })
                        } else {
                            MessageBox("提示", "密碼錯誤！")
                        }
                    });
                }
            },
            forget() {
                this.$router.push('/userForget')
            },
            zhuce() {
                this.$router.push('/userCreate')
            }
        },

    }

</script>

<style>
    .travel {
        margin-top: 20%;
        height: 80px;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .travel>img {
        width: 160px;
        height: 160px;
        border-radius: 50%;
    }

    .enroll {
        display: flex;
        margin-top: 50px;
        align-items: center;
        flex-direction: column;
    }

    .denglu {
        width: 180px;
        height: 190px;
        display: flex;
        margin-top: 30px;
        align-items: center;
        flex-direction: column;
    }

    .anniu {
        width: 180px;
        height: 30px;
        background-color: blue;
        border-radius: 10%;
    }

    .anniu1 {
        margin-top: 10px;
        width: 180px;
        height: 30px;
        background-color: blue;
        border-radius: 10%;
    }

    .anniu2 {
        margin-top: 10px;
        width: 180px;
        height: 30px;
        background-color: blue;
        border-radius: 10%;
    }

    .xieyi {
        margin-block-end: 0%;
    }
</style>